<template>
   <div   class="footer-content">
      <div  class="footer-body">
        <div  class="footer-item">
          <div  class="footer-title">COMMUNITY</div>
          <a
            
            href="https://www.facebook.com/Fcgbox-109081951901707"
            target="_blank"
            class="footer-row-item"
            ><div
              
              
              class="u-icon u-icon--right"
              ><span style="
                    font-size: 18px;
                    line-height: 18px;
                    font-weight: normal;
                    top: 0px;
                    
                  " class="icon iconfont image">&#xe620;</span></div
            >
            <div  class="row-item-name">Facebook</div></a
          ><a
            
            href="https://twitter.com/fcgbox"
            target="_blank"
            class="footer-row-item"
            ><div
              
              
              class="u-icon u-icon--right"
              ><span style="
                    font-size: 18px;
                    line-height: 18px;
                    font-weight: normal;
                    top: 0px;
                    
                  " class="icon iconfont image">&#xe882;</span></div
            >
            <div  class="row-item-name">Twitter</div></a
          ><a
            
            href="https://www.instagram.com/fcgboxpro/"
            target="_blank"
            class="footer-row-item"
            ><div
              
              
              class="u-icon u-icon--right"
              ><span style="
                    font-size: 18px;
                    line-height: 18px;
                    font-weight: normal;
                    top: 0px;
                    
                  " class="icon iconfont image">&#xe620;</span></div
            >
            <div  class="row-item-name">Instagram</div></a
          >
        </div>
        <div  class="footer-item">
          <div  class="footer-title">INFORMATIONS</div>
          <div  class="footer-row-item" @click="gotoPath('faq')">FAQ</div>
          <div  class="footer-row-item">Contact Us</div>
          <div  class="footer-row-item" @click="gotoPath('shippingRefund')">
            Shipping &amp; Refund
          </div>
        </div>
        <div  class="footer-item">
          <div  class="footer-title">LEGAL</div>
          <div  class="footer-row-item" @click="gotoPath('authentication')" >Authentication</div>
          <div  class="footer-row-item" @click="goToAgree">Terms of Service</div>
          <div  class="footer-row-item">Privacy</div>
        </div>
        <div  class="footer-item">
          <div  class="footer-title">PAYMENT OPTION</div>
          <div  class="footer-row-item">
            <a  href="https://usa.visa.com/" target="_blank"
              ><img
                
                src="/static/img/unboxingDetail/visa-light.svg"
                alt=""
                class="icon-img" /></a
            ><a  href="https://www.mastercard.us/"
              ><img
                
                src="/static/img/unboxingDetail/lmastercard-light.svg"
                alt=""
                class="icon-img"
            /></a>
          </div>
          <div  class="footer-row-item">
            <a  href="https://www.paypal.com/"
              ><img
                
                src="/static/img/unboxingDetail/paypal-light(1).svg"
                alt=""
                class="icon-img" /></a
            ><a  href="https://www.coinbase.com/"
              ><img
                
                src="/static/img/unboxingDetail/coin-light.svg"
                alt=""
                class="icon-img" /></a
            ><a  href="https://bitcoin.org/"
              ><img
                
                src="/static/img/unboxingDetail/bitcoin-light.svg"
                alt=""
                class="icon-img" /></a
            ><a  href="https://store.steampowered.com/"
              ><img
                
                src="/static/img/unboxingDetail/steam-light.svg"
                alt=""
                class="icon-img"
            /></a>
          </div>
          <div  class="footer-row-item">
            <a  href="https://payop.com/"
              ><img
                
                src="/static/img/unboxingDetail/payop.svg"
                alt=""
                class="icon-img"
            /></a>
          </div>
        </div>
      </div>
      <div  class="app-row">
        
          <!----><img class="app-logo" src="/static/img/unboxingDetail/logo_light.png" draggable="false"
        />
        <div  class="app-name">Rolling Boxes</div>
      </div>
      <div  class="footer-bottom">
        ©Rolling Boxes 2022. All Rights Reserved
      </div>
      <!-- <div  class="app-download">
        <a
          
          href="https://apps.apple.com/us/app/Rolling-Boxes/id6443597745"
          ><uni-image  class="down-icon-ios"
            ><div
              style="
                background-image: url('/static/icon/app_store.png');
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
              "
            ></div>
           <img
              src="/static/icon/app_store.png"
              draggable="false" /></uni-image></a
        ><a
          
          href="https://play.google.com/store/apps/details?id=com.cw.luckybox"
          ><uni-image  class="down-icon"
            ><div
              style="
                background-image: url('/static/icon/google_play.png');
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
              "
            ></div>
           <img
              src="/static/icon/google_play.png"
              draggable="false" /></uni-image
        ></a>
      </div> -->
    </div>
</template>

<script>
export default {
  methods:{
    gotoPath(name){
       this.$router.push({
        name: name,
      });
    },
    goToAgree(item) {
      this.$router.push({
        name: "agreement",
        query: {
          id: 25,
          title: "Cash withdrawal agreement",
        },
      });},
  }
}
</script>

<style lang="scss" scoped>
.footer-row-item {
    color: #76797b;
    width: 140px;
    min-height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 6px 0;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 14px;
    .icon-img {
        height: 18px;
        margin-right: 12px;
        margin-bottom: 8px;
      }
    .row-item-name {
      margin-left: 8px;
      
    }
  }
  .app-download {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
  }
  .footer-content {
    .footer-bottom {
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      padding-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      opacity: 0.8;
    }
    .app-row {
      display: flex;
      justify-content: center;
      align-items: center;
      .app-logo {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .app-name {
        font-size: 22px;
        font-weight: 700;
        opacity: 0.7;
      }
    }
    width: 100%;
    .footer-title {
      width: 140px;
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 14px;
    }
    .footer-body {
      width: 100%;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      box-sizing: border-box;
      .footer-item {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        margin-bottom: 20px;
      }
    }
  }
</style>